<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文章列表--layui后台管理模板</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
	<link rel="stylesheet" href="../../css/news.css" media="all" />
</head>
<body class="childrenBody">
	<blockquote class="layui-elem-quote news_search">
		<form class="layui-form">
		<div class="layui-inline">
		    <div class="layui-input-inline">
		    	<input type="text" value="" name="username" placeholder="请输入用户名" class="layui-input search_input">
		    </div>

			<a class="layui-btn search_btn" lay-submit=""
			   lay-filter="queryUser">查询</a>
		</div>
 		<!--<div class="layui-inline dynamicShow">
			<a class="layui-btn layui-btn-normal newsAdd_btn">添加用户</a>
		</div>-->
		</form>
	</blockquote>
	<div class="layui-form news_list">
	  	<table class="layui-table" id="userList" lay-filter="users">
		</table>
	</div>
	<div id="page"></div>
	<!--<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>-->
	<script type="text/javascript" src="plugins/layui/layui.js"></script>
	<script type="text/javascript" src="js/user/newsList.js"></script>
	
		    <script type="text/html" id="barDemo">
	  <a class="layui-btn layui-btn-xs" lay-event="allotRole">分配角色</a>
	    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	    
	    <!-- 这里同样支持 laytpl 语法，如： -->
	    {{#  if(d.auth > 2){ }}
	      <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
	    {{#  } }}
	  </script>
	  
	  <script id="switchTpl" type="text/html">  
<!-- 这里的 checked 的状态是-->  
<input type="checkbox"  name = "ifKey"   value = {{d.id}} lay-skin="switch" lay-text="启用|禁用" lay-filter="ifKeyDemo" {{ d.enable == '1' ? 'checked' : '' }}>  
</script>  
	<script type="text/javascript">
        layui.config({
            base : '/js/admin/'
        }).extend({
            ajaxExtention : 'ajaxExtention',//加载自定义扩展，每个业务js都需要加载这个ajax扩展
            $tool : 'tool'
        }).use(['table','form','$tool','jquery'], function(){
	    var table = layui.table,
		 form = layui.form,
      $tool = layui.$tool,
			$=layui.jquery;
	    //方法级渲染
          /*  var isAdminstr=localStorage.getItem("isAdmin");
            var isAdmin=isAdminstr=='true'?true:false;
            if(isAdmin){
                $(".dynamicShow").hide();

            }else {
                $(".dynamicShow").show();
            }*/

	    var tableIns=table.render({
	        elem: '#userList'
	        ,url: '/users'
	        ,cols: [[
	            {checkbox: true, fixed: true,width:'5%'}
//	            ,{field:'id', title: 'ID', width:'10%', sort: true,}
	            ,{field:'username', title: '用户名',  width:'10%'}
	            ,{field:'enable', title: '状态',  minWidth : 120, templet:"#switchTpl",unresize : true, width:'10%'}
	            ,{field:'merchantName', title: '所属门店',  width:'25%'}
                ,{field:'createTime', title: '创建时间',  width:'20%', templet:function(d){
                    if(d.createTime!=null){
                        return $tool.formatTime(d.createTime);
                    }else{
                        return "---";
                    }
                }}
	            ,{title: '操作', align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器

	        ]]
	        ,id: 'testReload'
	        ,page: true
	    });


            form.on("submit(queryUser)", function(data) {
                var username=data.field.username;
                //表格重新加载
                tableIns.reload({
                    where : {
                       username:username
                    }
                });
                return false;
            });
	    
	    form.on('switch(ifKeyDemo)', function(obj){
	        console.log(obj.tr[0].rowIndex);
	        var url='/users/changeStatus';
	        var userId=this.value;
	        var status=this.checked ? '1' : '0'; 
	        $.ajax({  
	            type: "POST",  
	            url:url,  
	            data:{id:userId,status:status},// 序列化表单值  
	            success: function(data) {  
	            	if(data.code==2000){
	          			top.layer.msg("修改成功");
	            	}else{
	            		top.layer.msg("修改失败");
	            	}
	            
	            } ,
	 		
		 		 error: function(request) {  
		             alert("Connection error");  
		         } 
	        });
	    });
	    
	    table.on('tool(users)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	    	  var data = obj.data; //获得当前行数据
	    	  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	    	  var tr = obj.tr; //获得当前行 tr 的DOM对象
	    	 
	    	  if(layEvent === 'detail'){ //查看
	    	    //do somehing
	    	  } else if(layEvent === 'del'){ //删除
	    	    layer.confirm('真的删除该用户吗', function(index){
	    	      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
	    	      layer.close(index);
	    	      //向服务端发送删除指令
	    	      var ids=obj.data.id;
	    	      $.ajax({  
	    	            type: "POST",  
	    	            url:"/users",  
	    	            data:{id:ids},// 序列化表单值  
	    	            success: function(data1) {  
	    	            	if(data1=='success'){
	    	            		top.layer.close(index);
	    	          			top.layer.msg("删除成功");
	    	           			layer.closeAll("iframe");
	    	          	 		//刷新父页面
	    	          	 		parent.location.reload();
	    	            	}
	    	            
	    	            } ,
	    	 		
	    		 		 error: function(request) {  
	    		             alert("Connection error");  
	    		         } 
	    	        }); 
	    	    });
	    	  } else if(layEvent === 'allotRole'){ //编辑
	    		  var ids=obj.data.id;
	    		  allotRole(ids);
	    	    
	    	  }
	    	});
	    
		    function allotRole(id){
		        var index = layui.layer.open({
		            title: "分配角色",
		            type: 2,
		            content: "user/selectRole.html?id="+id,
		            success: function (layero, index) {

		            }
		        });
	
		        //改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
		        $(window).resize(function () {
		            layui.layer.full(index);
		        });
		        layui.layer.full(index);
		  }
	});
	</script> 
</body>
</html>